import ReactMarkdown from "react-markdown";
import {Prism as SyntaxHighlighter} from "react-syntax-highlighter";
import {docco } from "react-syntax-highlighter/dist/cjs/styles/hljs";
import {tomorrow } from "react-syntax-highlighter/dist/cjs/styles/prism";
import {okaidia } from "react-syntax-highlighter/dist/cjs/styles/prism";
import data from "../data.json";

import './MyReactMarkdown.css'

// Markdown渲染组件
const MyReactMarkdown = ()=>{

    return(
        <ReactMarkdown
            children={data.data}
            components={{
                code({ node, inline, className, children, ...props }) {
                    const match = /language-(\w+)/.exec(className || '')
                    return !inline && match ? (
                        <SyntaxHighlighter
                            children={String(children).replace(/\n$/, '')}
                            style={docco }
                            language={match[1]}
                            PreTag="div"
                            showLineNumbers = {true}
                            {...props}
                        />
                    ) : (
                        <code className={className} {...props}>
                            {children}
                        </code>
                    )
                },
            }}
            escapeHtml={false}>
        </ReactMarkdown>
    )
}

export default MyReactMarkdown;
